<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!-- data source contents -->
<em class="ddp-bg-back"></em>
<div class="ddp-ui-contents-in">
  <!-- top -->
  <div class="ddp-ui-contents-top">
    <div class="ddp-ui-title">
      {{'msg.comm.menu.manage.prep' | translate}}
    </div>

    <!-- tab -->
    <ul class="ddp-list-top-tab">
      <li >
        <a [routerLink]="['/management/datapreparation/dataset']">{{'msg.comm.menu.manage.prep.set' | translate}}</a>
      </li>
      <li class="ddp-selected">
        <a [routerLink]="['/management/datapreparation/dataflow']">{{'msg.comm.menu.manage.prep.flow' | translate}}</a>
      </li>
      <li>
        <a [routerLink]="['/management/datapreparation/datasnapshot']">{{'msg.comm.menu.manage.prep.snapshot' | translate}}</a>
      </li>
    </ul>
    <!-- //tab -->

  </div>
  <!-- //top -->
  <div class="ddp-ui-contents-list">
    <div class="ddp-filter-option">
      <div class="ddp-ui-option ddp-clear ddp-optiontype">
        <!-- 검색 -->
        <div class="ddp-form-search ddp-fleft">
          <em class="ddp-icon-search"></em>
          <input type="text" placeholder="{{'msg.dp.ui.df.search.description' | translate}}" [(ngModel)]="searchText" (keypress)="searchDataflows($event);">
          <em class="ddp-btn-search-close" *ngIf="searchText" (click)="searchText = ''; reloadPage();"></em>
        </div>
        <!-- //검색 -->
        <div class="ddp-ui-rightoption">
          <span class="ddp-data-total">{{'msg.log.ui.num.lists' | translate : { value : pageResult.totalElements} }}</span>
          <a href="javascript:" (click)="createDataflow()" class="ddp-btn-link"><em class="ddp-icon-link-add"></em>{{'msg.dp.btn.new.df' | translate}}</a>
        </div>

      </div>
    </div>

    <table class="ddp-table-form ddp-table-type3" *ngIf="dataflows.length > 0">
      <colgroup>
        <col width="*">
        <col width="15%">
        <col width="20%">
      </colgroup>
      <thead>
      <tr>
        <th (click)="changeOrder('dfName')" class="ddp-cursor">
          {{'msg.comm.ui.name' | translate}}
          <em class="ddp-icon-array-default2" *ngIf="selectedContentSort.key !== 'dfName' || selectedContentSort.sort === 'default'"></em>
          <em class="ddp-icon-array-asc2" *ngIf="selectedContentSort.key === 'dfName' && selectedContentSort.sort === 'asc'"></em>
          <em class="ddp-icon-array-des2" *ngIf="selectedContentSort.key === 'dfName' && selectedContentSort.sort === 'desc'"></em>
        </th>
        <th>
          {{'msg.comm.menu.manage.prep.set' | translate}}
        </th>
        <th (click)="changeOrder('createdTime')" class="ddp-cursor">
          {{'msg.comm.th.created' | translate}}
          <em class="ddp-icon-array-default2" *ngIf="selectedContentSort.key !== 'createdTime' || selectedContentSort.sort === 'default'"></em>
          <em class="ddp-icon-array-asc2" *ngIf="selectedContentSort.key === 'createdTime' && selectedContentSort.sort === 'asc'"></em>
          <em class="ddp-icon-array-des2" *ngIf="selectedContentSort.key === 'createdTime' && selectedContentSort.sort === 'desc'"></em>
        </th>

      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of dataflows; let i = index" [attr.data-index]="i" (click)="goToDfDetail(item.dfId)">
        <td>
          <div class=" ddp-txt-long">
            {{item.dfName}}
            <span class="ddp-txt-colortype" *ngIf="item.dfDesc">- {{item.dfDesc}}</span>
          </div>
        </td>
        <td>
          <span class="ddp-data-num"><em class="ddp-icon-db-s"></em>{{item.importedDsCount}}</span>
          <span class="ddp-data-num"><em class="ddp-icon-imported-s"></em>{{item.wrangledDsCount}}</span>
        </td>

        <td class="ddp-data-last">
          {{item.createdTime | mdate:'YYYY-MM-DD HH:mm'}} <em class="ddp-icon-by">{{'msg.dp.ui.by' | translate}}</em>{{item.createdBy.fullName}}
          <div class="ddp-btn-control">
            <em class="ddp-icon-control-cut" (click)="confirmDelete($event,item.dfId);"></em>
          </div>
        </td>
      </tr>

      </tbody>


    </table>

    <!-- 데이터 없음 -->
    <div class="ddp-data-source-none" *ngIf="dataflows.length === 0; else yesDf">
      {{'msg.dp.ui.no.df.description' | translate}}
    </div>
    <!-- //데이터 없음 -->

    <!-- 더보기 -->
    <ng-template #yesDf>
      <component-pagination [info]="pageResult" (changePageData)="changePage($event)"></component-pagination>
    </ng-template>
    <!-- //더보기 -->
  </div>



</div>

<!-- //data source contents -->

<app-delete-modal (deleteConfirm)="deleteDataflow()"></app-delete-modal>
<app-create-dataflow-name-desc></app-create-dataflow-name-desc>
